<template>
  <div class="base-two">
    BaseTwo
    <p class="box"></p>
    <button>点我</button>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 
 在组件中写的样式是全局样式, 会影响到其它组件
 需求: 在当前组件中写的样式, 只作用于当前组件
 如何做呢?
 答案: 只要在当前组件的style标签中加scoped属性就可以让样式只作用于当前组件
 ------------------
 为什么?
 - 只要style标签加上scoped属性, 就会给当前组件中所有的标签都加上一个自定义属性
 - 自定义属性: data-v-hash值
 - vue会处理当前组件style标签中所有的选择器
   - 选择器加上自定义属性 变成 属性选择器
     div{} ---> div[自定义属性]{}
---------------
推荐: 
组件里面的样式应该是局部的, 不推荐写成全局的, 所以都要加scoped属性
*/
div {
  border: 3px solid green;
  margin: 20px;
}
</style>